<template>
	<radio-group class="radio-group" @change="radioChange">
		<label
			v-for="(item,idx) in items"
			:key="idx"
			:class="['radio-label', item.disabled?'disabled':'']"
		>
			<radio
				class="radio"
				:value="item.name"
				:disabled="item.disabled"
				:checked="item.checked"
				:color="clr"
			/>
			{{item.value}}
		</label>
	</radio-group>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'items':{type:Array, default:()=>[]},
			'value':{type:null},
			'color':{type:String}
		},
		computed:{
			clr(){
				return this.$zp.mapColor[this.color] || ''
			}
		},
		methods:{
			radioChange(e){
				this.$emit('input', e.detail.value)
				this.$emit('change', e)
			}
		}
	}
</script>

<style lang="scss">
	.radio-group{
		.radio-label{
			display: flex;
			align-items: center;
			min-height: $form-cell-min-height;
			padding: $form-cell-padding 0;
			border-bottom: solid 1upx $border-color;
			&:last-of-type{
				border: 0;
			}
		}
		.radio{
			margin-right: 10upx;
		}
		.disabled{
			opacity: $hover-opacity;
		}
	}
</style>
